<template>
  <div class="user-page">
    <div class="content-container container" style="width: 1170px">
      <!--      解决图片加载卡顿，v-bind-->
      <el-image class="user-head"
                :src="src1"
                :fit="fit"></el-image>

      <div class="user-info-page">
        <div class="user-info-page-menu clearfix">
          <router-link class="user-info-page-nav" active-class="active" exact
                       :to="{name: 'personal'}" @click.native="handoff('1')">{{ $t('personalInfo.info') }}
          </router-link>
          <router-link class="user-info-page-nav" active-class="active" v-if="type === 'student'"
                       :to="{name: 'college'}" @click.native="handoff('2')">{{ $t('personalInfo.college') }}
          </router-link>
          <router-link class="user-info-page-nav" active-class="active"
                       :to="{name: 'password'}" @click.native="handoff('3')">{{ $t('personalInfo.password') }}
          </router-link>
          <router-link class="user-info-page-nav" active-class="active"
                       :to="{name: 'safe'}" @click.native="handoff('4')">{{ $t('personalInfo.safe') }}
          </router-link>
        </div>
        <div class="index-body">
          <router-view/>
        </div>
      </div>
    </div>
  </div>

</template>


<script>

export default {
  linkActiveClass: 'active',
  name: "personalData",
  components: {},
  data() {
    return {
      fit: 'cover',
      src1: '',
      src2: '',
      src3: '',
      src4: '',
      type: '',
    }
  },
  created() {

    this.init()
  },
  methods: {

    // 初始化资源
    async init(){

      this.type = localStorage.getItem("type")
      // 初始化头部图片
      this.src1 = require('../../../assets/common/personalInfo_banner.png')
      this.src2 = require('../../../assets/common/personalInfo_banner.png')
      this.src3 = require('../../../assets/common/updatePassword_banner.png')
      this.src4 = require('../../../assets/common/securitySetting_banner.png')
    },



    // 切换头部图片
    handoff(code) {
      if (code == 1 || code == 2) {
        this.src1 = this.src2
      } else if (code == 3) {
        this.src1 = this.src3
      } else if (code == 4) {
        this.src1 = this.src4
      }
    },
  }
}

</script>

<style>
body {
  font-size: 14px;
}
</style>
<style scoped>
*, :after, :before {
  box-sizing: border-box;
}

div {
  display: block;
}

body, html {
  color: #444;
  font-size: 14px;
}

a {
  background-color: transparent;
  color: #337ab7;
  text-decoration: none;
}


a:active, a:hover {
  outline: 0;
}


.user-page .content-container {
  margin: auto;
  background: #fff;
  padding: 0;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.user-head {
  height: 102.63px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: auto 100%;
  background-color: #ffecee;
}


.user-page, .user-page .content-container {
  height: 100%;
}

.user-page .el-image__inner .user-head {
  height: 100px;
  width: 100%;
}


.user-page .user-info-page {
  padding: 20px;
  background-color: #fff;
}

.user-page .user-info-page {
  position: relative;
}

.user-page .user-info-page .user-info-page-menu {
  text-align: center;
  border: 1px solid #ea5947;
  margin: 12px auto 0;
  border-radius: 4px;
}


.user-page .user-info-page .user-info-page-menu .active {
  background: #ea5947;
  color: #fff;
}

.user-page .user-info-page .user-info-page-menu {
  height: 34px;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 32px;
}


.user-page .user-info-page .user-info-page-menu .user-info-page-nav {
  float: left;
  border-right: 1px solid #ea5947;
}

.user-page .user-info-page .user-info-page-menu .user-info-page-nav {
  padding: 0 10px;
  text-align: center;
  color: #ea5947;
}

.user-page .user-info-page .user-info-page-menu a:focus, .user-page .user-info-page .user-info-page-menu a:hover {
  text-decoration: none;
}

.user-page .user-info-page .user-info-page-menu .active {
  color: #fff;
}


</style>